<script setup>
	import { ref, computed } from 'vue'
	// 引入子组件
	import customPassword from './components/password.vue' 
	import custoMobile from './components/mobile.vue'
const tabMetas = [
	{title: '密码登录', subTitle: '验证码登录'},
	{title: '验证码登录', subTitle: '密码登录'}
]

const tabIndex = ref(1)
// 计算属性，根据tabIndex返回对应的tabMeta
const tabMeta = computed(() => tabMetas[tabIndex.value])

const changeNumber = () => {
	// 使用三元运算符切换tabIndex的值
	tabIndex.value = tabIndex.value === 0 ? 1 : 0
}
</script>

<template>
	<view class="user-login">
	  <view class="login-type">
	    <view class="title">{{tabMeta.title}}</view>
	    <view class="type" @click="changeNumber">
	      <text>{{tabMeta.subTitle}}</text>
	      <uni-icons color="#3c3e42" type="forward"></uni-icons>
	    </view>
	  </view>
	</view>
	
	<custom-password v-show="tabIndex===0"></custom-password>
	<custo-mobile v-show="tabIndex===1"></custo-mobile> >
	
	<view class="social-login">
	  <view class="legend">
	    <text class="text">其他方式登录</text>
	  </view>
	  <view class="social-account">
	    <view class="icon">
	      <uni-icons color="#00b0fb" size="30" type="qq" />
	    </view>
	    <view class="icon">
	      <uni-icons color="#fb6622" size="30" type="weibo" />
	    </view>
	    <view class="icon">
	      <uni-icons color="#07c160" size="30" type="weixin" />
	    </view>
	  </view>
	</view>


</template>



<style lang="scss">
 @import './index.scss';
</style>
